<template>
  <div class="layout">
    <Layout>
      <NavHeader></NavHeader>
      <Layout>
        <Sider hide-trigger class="layout-sidebar">
          <Menu
            active-name="1-2"
            theme="light"
            width="auto"
            :open-names="['1']"
            @on-select="gotoPage"
          >
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                css教程
              </template>
              <MenuItem name="home">首页</MenuItem>
              <MenuItem name="about">about</MenuItem>
              <MenuItem name="cssText">Css文本</MenuItem>
              <MenuItem name="cssFont">Css字体</MenuItem>
              <MenuItem name="cssBorder">Css边框</MenuItem>
              <MenuItem name="cssLayout">Css布局</MenuItem>
              <MenuItem name="cssFlex">CssFlex布局</MenuItem>
              <MenuItem name="layout">Flex布局</MenuItem>
              <MenuItem name="grid">Grid布局</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                css3教程
              </template>
              <MenuItem name="layout1">布局1</MenuItem>
              <MenuItem name="layout2">布局2</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                Item 3
              </template>
              <MenuItem name="3-1">Option 1</MenuItem>
              <MenuItem name="3-2">Option 2</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout>
          <router-view></router-view>
        </Layout>
      </Layout>
      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>

<script>
import NavHeader from "@/views/NavHeader";
export default {
  name: "Index",
  components: { NavHeader },
  methods: {
    gotoPage(item) {
      this.$router.push({
        name: item
      });
    }
  }
};
</script>

<style scoped>
.layout-footer-center {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
}

.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 20px 0 auto;
}

.layout-sidebar {
  width: 100px;
  height: 100%;
  background-color: #fff;
}
</style>
